<template>
  <!-- 测试时加上 /dev-api/  打包时 删掉 -->
  <el-upload
    ref="uploadRef"
    class="upload-demo"
    name="video"
    :data="{fileType:'video'}"
    action="/admin/upload/file"
    :headers="{
      token: accessToken,
    }"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :on-error="handleError"
    :file-list="fileList"
    :auto-upload="false"> <!-- 根据需要设置 -->
    <template #trigger>
<el-button  size="small" type="primary">选取文件</el-button>
</template>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <template #tip>
<div  class="el-upload__tip">只能上传视频文件，且不超过500MB</div>
</template>
  </el-upload>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { UploadInstance } from 'element-plus';
import { Auth } from "@/utils/auth";

const accessToken = Auth.getAccessToken();

const uploadRef = ref<UploadInstance>(); // 获取 el-upload 实例
 
const emit = defineEmits(['success']);

const fileList = ref([]); // 文件列表，根据需要初始化或从后端获取

const handleSuccess = (response, file, fileList) => {
  ElMessage.success('上传成功');
  emit('success', response); // 更新父组件绑定值
};

const handleError = (err, file, fileList) => {
  ElMessage.error('上传失败');
};
const beforeUpload = (file) => {
  const isVideo = file.type === 'video/mp4' || file.type === 'video/avi' || file.type === 'video/quicktime'; // 支持的视频格式，根据需要添加更多格式
  const isLt500M = file.size / 1024 / 1024 < 500; // 文件大小限制为500MB
  if (!isVideo) {
    ElMessage.error('上传视频只能是 MP4, AVI, MOV 格式!');
    return false;
  }
  if (!isLt500M) {
    ElMessage.error('上传视频大小不能超过 500MB!');
    return false;
  }
  return isVideo && isLt500M; // 如果验证通过，返回 true，否则返回 false，阻止文件上传。
};
const submitUpload = () => { // 手动触发上传动作，如果设置了 :auto-upload="false" 的话。
  if (!uploadRef.value) return;
  console.log(uploadRef.value);
  // 手动触发上传
  uploadRef.value.submit();
   // 注意这里的 this 可能需要根据实际上下文调整。例如，在 setup 中使用 ref 或其他方法获取 upload 实例。
};
</script>
